<template>
    <view class="list">
        <view class="item" v-for="(item,index) of list" :key="index">
            <easy-loadimage mode="widthFix"
                :scroll-top="scrollTop"
                :image-src="item.image"></easy-loadimage>
            <text>{{item.content}}</text>
        </view>
    </view>
</template>
<script>
    import easyLoadimage from '@/components/easy-loadimage/easy-loadimage.vue'
    const MockData = require('@/static/easy-loadimage/mock-data.json')
    export default{
        components:{easyLoadimage},
        data(){
            return {
                list:MockData,
                scrollTop:0
            }
        },
        onPageScroll({scrollTop}) {
            // 传入scrollTop值并触发所有easy-loadimage组件下的滚动监听事件
            this.scrollTop = scrollTop;
        },
    }
</script>
<style scoped>
    .list{display: flex;justify-content: space-between;flex-wrap: wrap;padding: 32rpx;background: #F1F1F1;}
    .list .item{width: 48%;background: #fff;margin-bottom: 80rpx;border-radius: 20rpx;}
    .list .item >>> .easy-loadimage{
        width: 100%;
        /* height: 500rpx; */
        margin-bottom: 38rpx;
    }
    .list .item >>> .origin-img{
        border-radius: 20rpx;
    }
    /* mode为widthFix即图片高度自适应时要设置占位图默认高度 */
    .list .item >>> .loadfail-img,.list .item >>>.loading-img{
        height: 500rpx;
    }
</style>